﻿<div id="js_app_wp__WPID_">

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>

  <div class="map" style="width:585px; height:285px" >
  </div>

  <script data-js-app-wp="true">
    <![CDATA[

	        jQuery(document).ready(function () {
				
				var settings = $appContext;
	
				var appContainer = "#" + settings.wpId + " .map";
 		        var appContainerElement = jQuery(appContainer).get(0);
	
	            new officeWorldMapDemo.OfficeMap(appContainerElement).init();
	        });
			
        ]]>
  </script>

  <script>
    <![CDATA[

        window.officeWorldMapDemo = window.officeWorldMapDemo || {};

        (function (app) {

            app.OfficeMap = function (container) {

                var self = this;

                self._domContainer = container;

                self._map = null;
                self._offices = [];
                self._currentOfficeInfoTip = null;

                self.loadOffices = function () {

                    var imageUrl = "http://cdn3.iconfinder.com/data/icons/business-and-finance-icons/512/Office_Building-32.png";

                    self._offices.push({
                        x: 25.27202,
                        y: 55.307922,
                        title: "Dubai",
                        description: "Technology, investment and manufacturing office.",
                        imageUrl: imageUrl
                    });
                    self._offices.push({
                        x: 40.713956,
                        y: -74.00802,
                        title: "New York",
                        description: "Global sales office.",
                        imageUrl: imageUrl
                    });
                    self._offices.push({
                        x: 55.771939,
                        y: 37.617188,
                        title: "Moscow",
                        description: "PR & Marketing.",
                        imageUrl: imageUrl
                    });
                    self._offices.push({
                        x: -33.890542,
                        y: 151.274856,
                        title: "Sydney",
                        description: "Head Office.",
                        imageUrl: imageUrl
                    });
                    self._offices.push({
                        x: 22.352616,
                        y: 114.158936,
                        title: "Hong Kong",
                        description: "Manufacturing, R&D offices.",
                        imageUrl: imageUrl
                    });
                    self._offices.push({
                        x: 51.495065,
                        y: -0.134583,
                        title: "London",
                        description: "Tax & Legal offices.",
                        imageUrl: imageUrl
                    });
                };

                self.initMarker = function (officeLocation) {

                    var officeMarker = new google.maps.Marker({
                        position: new google.maps.LatLng(officeLocation.x, officeLocation.y),
                        map: self._map,
                        icon: officeLocation.imageUrl
                    });

                    var officeInfoTip = new google.maps.InfoWindow({
                        content: officeLocation.description
                    });

                    google.maps.event.addListener(officeMarker, 'click', function () {

                        if (self._currentOfficeInfoTip !== null)
                            self._currentOfficeInfoTip.close();

                        officeInfoTip.open(self._map, officeMarker);
                        self._currentOfficeInfoTip = officeInfoTip;
                    });
                };

                self.initOfficeButton = function (container, officeLocation) {

                    container.innerHTML = officeLocation.title;
                    container.className = "office-btn";

                    google.maps.event.addDomListener(container, 'click', function () {
                        self._map.setZoom(8);
                        self._map.setCenter(new google.maps.LatLng(officeLocation.x, officeLocation.y));
                    });
                };

                self.initShortcut = function (officeLocation) {

                    var officeBtn = document.createElement('div');

                    self.initOfficeButton(officeBtn, officeLocation);
                    self._map.controls[google.maps.ControlPosition.TOP_CENTER].push(officeBtn);
                };

                self.init = function () {

                    var mapOptions = {
                        zoom: 1,
                        center: new google.maps.LatLng(0, 0),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    self._map = new google.maps.Map(self._domContainer, mapOptions);

                    self.loadOffices();

                    for (var key in self._offices) {

                        var currentOffice = self._offices[key];

                        self.initMarker(currentOffice);
                        self.initShortcut(currentOffice);
                    }

                    self._map.setCenter(new google.maps.LatLng(0, 0));
                };
            };

        })(window.officeWorldMapDemo);

   ]]>

  </script>

</div>
